<template>
  <el-container class="boxmain">
      <el-header>
          <Head :userinfo="userinfo"/>
      </el-header>
      <el-container class="box">
        <el-aside width="200px">
            <Menu :userinfo="userinfo"/>
        </el-aside>
        <el-container>
          <el-main>
              <router-view></router-view>
          </el-main>
          <el-footer><Foot/></el-footer>
        </el-container>
      </el-container>
    </el-container>
</template>
<script>
import Head from "@/components/head.vue"
import Foot from "@/components/foot.vue"
import Menu from "@/components/asidemenu.vue"
import {getuserinfo} from "@/api"
export default {
    components:{
        Head,
        Foot,
        Menu
    },
    data(){
        return{
          userinfo:null
        }
    },
    mounted(){
        getuserinfo()
        .then(res=>{
            if(res.type){
                this.userinfo = res.result
                sessionStorage.setItem("roleid",res.result.roleid)
                sessionStorage.setItem("username",res.result.username)
            }
        })
    }
    
}
</script>
<style lang="scss">
html,body{
    background: url("./../assets/images/bg1.jpg") no-repeat;
    background-size: 100% 100%
    
}
.el-header{
    
    background:rgba(0,0,0,.2);
    
}
.el-footer{
    
    background:rgba(0,0,0,.2);
    
}
.boxmain{
    width: 100%;
    height: 100%;
}
.el-aside{
  background:rgba(0,0,0,.2);
  height: 100%;
}

</style>